<template>
  <QueryForm 
    :updateTableList="updateTableList" 
    :conditionList="conditionList"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import QueryForm from './components/QueryForm.vue'

const handleSearch = (params) => {
  console.log('搜索参数:', params);
  // 这里可以处理搜索逻辑
};

const handleReset = (params) => {
  console.log('重置参数:', params);
  // 这里可以处理重置逻辑
};

// 定义表格数据每项的类型
type tableDataItem = {
  username: string;
  age: number;
  address: string;
  big: string;
  color: string;
  hobby: string;
  sex: string;
  school: string;
  grade: string;
};
// 表格加载loading
const loading = ref(false);
// 表格数据
let tableData = ref<tableDataItem[]>([]);
// 表格数据总条数
const total = ref(0);
// 查询条件配置项
// type 是查询条件里面的组件类型 如input select等，可以自行添加需要的组件
const conditionList = reactive([
  {
    id: 1,
    type: "input",
    label: "用户名称",
    prop: "username",
    placeholder: "请输入用户名称",
    span: 6,
  },
  {
    id: 2,
    type: "select",
    label: "个头大小",
    prop: "big",
    placeholder: "请选择个头大小",
    optionList: [
      {
        label: "大",
        value: 1,
      },
      {
        label: "小",
        value: 0,
      },
    ],
    span: 6,
  },
  {
    id: 3,
    type: "select",
    label: "性别",
    prop: "sex",
    placeholder: "请选择性别",
    optionList: [
      {
        label: "男",
        value: 1,
      },
      {
        label: "女",
        value: 0,
      },
    ],
    span: 6,
  },
  {
    id: 4,
    type: "input",
    label: "地址",
    prop: "address",
    placeholder: "请输入地址",
    span: 6,
  },
  {
    id: 5,
    type: "datetime",
    label: "档案时间",
    prop: "time",
    span: 6,
  },
]);
const reqTableList = async (reqParams: any) => {
  // 模拟请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          list: [
            {
              username: "张三",
              age: 18,
              address: "北京市",
              big: 1,
              color: "red",
            }
          ]
        }
      })
    })
  })
};
// 请求数据代码仅供参考，这里放自己的业务逻辑
const updateTableList = async (reqParams: any) => {
  loading.value = true;
  const { code, data }: any = await reqTableList(reqParams);
  if (code === 200) {
    tableData.value = data.list.map((item: tableDataItem) => ({
      ...item,
      bigLabel: item.big ? "大" : "小",
      sexLabel: item.sex ? "男" : "女",
    }));
    total.value = data.total;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  }
};
</script>